messageTray: Summary items should be square and have spacing

Each summary icon is 48x48 with a padding of 6px on each side. Thus,
each summary item is 60px wide. Therefore the summary mode should be
60px high instead of 72px.

Changed the tray actor to use a ClutterBinLayout so that it honors the
y-expand property of its children.

https://bugzilla.gnome.org/show_bug.cgi?id=682248

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 5ce232b44e93fc4a5433af337c533da85de9dffa..64e651af5373d57fb7b31f54789855107f046f6b 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1418,7 +1418,8 @@ StButton.popup-menu-item:insensitive {
 
 #summary-mode {
     padding: 2px 0px 0px 4px;
-    height: 72px;
+    height: 60px;
+    spacing: 10px;
 }
 
 #summary-mode:rtl {

diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 2d7ef8ea2cad247477243c93d9090371b74fd8c2..7ada61685986fa0bb2b48af5768ecef6f3edb6c9 100644 (file)
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1361,6 +1361,7 @@ const MessageTray = new Lang.Class({
         }));
 
         this.actor = new St.Widget({ name: 'message-tray',
+                                     layout_manager: new Clutter.BinLayout(),
                                      reactive: true,
                                      track_hover: true });
         this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
@@ -1378,6 +1379,7 @@ const MessageTray = new Lang.Class({
         this._notificationClickedId = 0;
 
         this._summaryBin = new St.Bin({ x_align: St.Align.END,
+                                        y_expand: true, // this is the Clutter property
                                         reactive: true });
         this._summaryBin.connect('button-release-event', Lang.bind(this, function(actor, event) {
             this._setClickedSummaryItem(null);